<template>
    <div>
        <button @click="handleClick">{{location}}</button>
        <van-swipe class="my-swipe" :autoplay="2000">
            <van-swipe-item v-for="item of movies" :key="item.pic">
                <img v-lazy="image"  class="pic" :src="item.pic" />
            </van-swipe-item>
        </van-swipe>
        <van-tabs v-model="active">
            <van-tab title="正在热映" to="/films/nowPlaying"></van-tab>
            <van-tab title="即将上映" to="/films/comingSoon"></van-tab>
        </van-tabs>
        <div>
            <van-tabbar v-model="activedowm">
                <van-tabbar-item to="/films/nowPlaying" icon="">电影</van-tabbar-item>
                <van-tabbar-item icon="">影院</van-tabbar-item>
                <van-tabbar-item icon="https://mall.s.maizuo.com/mzmovie-icon-news-42x42-gray.png">资讯</van-tabbar-item>
                <van-tabbar-item to="/center" icon="">我的</van-tabbar-item>
            </van-tabbar>
        </div>
        <router-view />
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        data() {
            return {
                active: 0,
                movies:[],
                location:""
            };
        },
        methods: {
            handleClick(){
                this.$router.push('/city')
            }
        },
        mounted(){
            
            let url = "http://47.108.197.28:4000/api/movie/top250";
            axios.get(url).then(res=>{
            this.movies = res.data.res;
            })
            let data = {
                key: "V7DBZ-ZKGWR-QU6W7-W4YAM-A3DDZ-PBFTL"
            };
                let cityurl = "https://apis.map.qq.com/ws/location/v1/ip";
                data.output = "jsonp";
                this.$jsonp(cityurl, data)
                .then(res => {
                    console.log(res);
                    this.location = res.result.ad_info.city
                    
                localStorage.setItem("locationCity",this.location)
                })

        },
    }
</script>

<style scoped>
.pic{
    width: 100%;
    height: 150px;
}
.my-swipe .van-swipe-item {
    text-align: center;
    background-color: #39a9ed;
}
</style>